<template>
    <div class="container">
        <div class="form-box">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="商品图片">
                    <el-button type="primary" @click="clickFile">上传商品图片</el-button>
                    <input type="file" style="display: none" ref="file" id="file"/>
                </el-form-item>

                <el-form-item label="商品名称" prop="goodsName">
                    <el-input v-model="form.goodsName"></el-input>
                </el-form-item>
                <el-form-item label="商品类别" prop="goodsTypeName">
                    <el-select v-model="form.goodsTypeName">
                        <el-option v-for="(goodsType,index) in goodsTypes" :key="goodsType"
                                   :label="goodsType.goodsTypeName" :value="index">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" prop="goodsPrice">
                    <el-input-number v-model="form.goodsPrice"/>
                </el-form-item>
                <el-form-item label="商品库存" prop="goodsStock">
                    <el-input-number v-model="form.goodsStock"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">添加商品</el-button>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>

<script>
    import { doUpload } from '../../api/upload';
    import { addGoods, listGoodsType } from '../../api/goods';

    export default {
        name: 'AddGoods',
        created() {
            this.fetchData();
        },
        data() {
            return {

                rules: {
                    goodsName: [{ required: true, message: '商品名不得为空', trigger: 'blur' }],
                    goodsStock: [{ required: true, message: '商品库存不得为空', trigger: 'blur' }],
                    goodsTypeName: [{ required: true, message: '商品类别不得为空', trigger: 'blur' }],
                    goodsPrice: [{ required: true, message: '商品价格不得为空', trigger: 'blur' }]
                },


                goodsTypes: [],
                form: {
                    goodsName: '',
                    goodsStock: 0,
                    goodsTypeName: '',
                    goodsPrice: 0,
                    isDeleted: 1,
                    goodsPicture: '',
                    goodsTypeId: null
                }
            };
        },
        methods: {
            fetchData() {
                listGoodsType().then(res => {
                    this.goodsTypes = res.data.data;
                });
            },
            clickFile() {
                document.querySelector('#file').click();
            },
            async upload() {
                let param = new FormData();
                param.append('file', this.$refs.file.files[0]);
                await doUpload(param).then(res => {
                    this.form.goodsPicture = res.data.data;
                });
            },
            async onSubmit() {

                await this.upload();
                if (this.form.goodsPicture === '') {
                    this.$message.error('商品图片未上传');
                }
                let index = this.form.goodsTypeName;
                this.form.goodsTypeName = this.goodsTypes[index].goodsTypeName;
                this.form.goodsTypeId = this.goodsTypes[index].goodsTypeId;

                await addGoods(JSON.stringify(this.form)).then(res => {
                    if (res.data.resultCode === 201) {
                        this.$message.success('添加成功');
                        this.form = {
                            goodsName: '',
                            goodsStock: 0,
                            goodsTypeName: '',
                            goodsPrice: 0,
                            isDeleted: 1,
                            image: '',
                            goodsTypeId: null
                        };
                    }else {
                        this.$message.error("添加失败");
                    }
                });
            }
        }

    };
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
